<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/boke_list.css">
</head>
<body>
    <div class="nav">
        <img src="狗.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个标签仅仅用于占位，把这几个a标签挤到右边去 -->
        <div class="spacer"></div>
        <a href="boke_list.html">主页</a>
        <a href="boke_edit.html">写博客</a>
        <a href="logout">注销</a>
    </div>

    <!-- 页面主体布局样式 -->
    <div class="container">
        <!-- 左侧部分 -->
          <div class="container-left">
            <!-- 使用这个 .card表示用户信息 -->
            <div class="card">
                <img src="狗.jpg" alt="">
                <h3>我的大帅哥</h3>
                <a href="https://gitee.com/struggling-zjm">gitee 地址</a>
                <div class="counter"> 
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter"> 
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
           
         </div>
         <!-- 右侧部分 -->
         <div class="container-right">
            
         </div>
    </div>



    <script src="./js/jquery.min.js"></script>
    <script>
        function getBlogs()
        {
            //  $.ajax({
            //     type:'get',
            //     url:'boke',
            //     success:function(body)
            //     {
            //         let containerRight=document.querySelector('.container-right');

            //         for(let blog of body)
            //         {
            //             // 构造整个博客的div
            //         let blogDiv=document.createElement('div'); 
            //         blogDiv.className='blog';
                      
            //         // 构造标题
            //         let titleDiv=document.createElement('div');
            //         titleDiv.className='title';
            //         titleDiv.innerHTML=boke.title;
            //         blogDiv.appendChild(titleDiv);

            //         //构造发布时间
            //         let dateDiv=document.createElement('div');
            //         dateDiv.className='data';
            //         dateDiv.innerHTML=boke.postTime;
            //         blogDiv.appendChild(dateDiv);

            //         //构造博客摘要
            //         let descDiv=document.createElement('div');
            //         descDiv.className='desc';
            //         descDiv.innerHTML=boke.content;
            //         blogDiv.appendChild(descDiv);

            //         //构造查看全文按钮
            //         let a=document.createElementNS('a');
            //         a.innerHTML='查看全文 &gt;&gt;';
            //         a.href='boke_detail.html?bokeId='+boke.bokeId;
            //         blog.appendChild(a);
            //         //把blogDiv添加到父元素中
            //         containerRight.appendChild(blogDiv);
            //         }
            //     }

            //  });   

            $.ajax({
                type: 'get',
                url: 'boke',
                success: function(body) {
                    // 响应的正文 是一个 json 字符串, 此处已经被 jquery 自动解析成 js 对象数组了. 
                    // 直接 for 循环遍历即可. 
                    let containerRight = document.querySelector('.container-right');
                    for (let blog of body) {
                        // 构造页面内容, 参考之前写好的 html 代码
                        // 构造整个博客 div
                        let blogDiv = document.createElement('div');
                        blogDiv.className = 'blog';
                        // 构造标题
                        let titleDiv = document.createElement('div');
                        titleDiv.className = 'title';
                        titleDiv.innerHTML = blog.title;
                        blogDiv.appendChild(titleDiv);
                        // 构造发布时间
                        let dateDiv = document.createElement('div');
                        dateDiv.className = 'date';
                        dateDiv.innerHTML = blog.postTime;
                        blogDiv.appendChild(dateDiv);
                        // 构造 博客 摘要
                        let descDiv = document.createElement('div');
                        descDiv.className = 'desc';
                        descDiv.innerHTML = blog.content;
                        blogDiv.appendChild(descDiv);
                        // 构造查看全文按钮
                        let a = document.createElement('a');
                        a.innerHTML = '查看全文 &gt;&gt;';
                        // 期望点击之后能跳转到博客详情页. 为了让博客详情页知道是点了哪个博客, 把 blogId 给传过去
                        a.href = 'boke_detail.html?bokeId=' + blog.bokeId;
                        blogDiv.appendChild(a);

                        // 把 blogDiv 加到父元素中
                        containerRight.appendChild(blogDiv);
                    }
                }
            });
        }
        getBlogs();


        function checkLogin() {
            $.ajax({
                type: 'get',
                url: 'login',
                success: function(body) {
                    if (body.userId && body.userId > 0) {
                        // 登录成功!!
                        console.log("当前用户已经登录!!");
                        // 加上个功能, 把当前用户的名字显示到界面上. 
                        let h3 = document.querySelector('.container-left .card h3');
                        h3.innerHTML = body.username;
                    } else {
                        // 当前未登录
                        // 强制跳转到登录页. 
                        location.assign('login.html');
                    }
                }
            });
        }

        checkLogin();

    </script>
</body>
</html>